// src/components/work/MembersPage.tsx
import { PlusOutlined } from '@ant-design/icons';
import { Avatar, Button, Input, Pagination, Table } from 'antd';
import React, { useState } from 'react';
import './MembersPage.scss';

const { Search } = Input;

const MembersPage: React.FC = () => {
  const [searchText, setSearchText] = useState('');
  const [members, setMembers] = useState([
    { id: 1, name: '熊大', studentNumber: '2025170231', phone: '1955252321', email: '17652328@qq.com', department: '前端组', role: '队长', school: '计算机学院', year: '2018', major: '软件工程', lastLogin: '2024年7月13日 03:00' },
    // 添加更多成员数据以填满页面
  ]);

  const handleSearch = (value: string) => {
    setSearchText(value);
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text: string, record: any) => (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Avatar style={{ marginRight: '8px', backgroundColor: '#87d068' }}>{text.charAt(0)}</Avatar>
          <span>{text}</span>
        </div>
      ),
    },
    {
      title: '学号',
      dataIndex: 'studentNumber',
      key: 'studentNumber',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '学院',
      dataIndex: 'school',
      key: 'school',
    },
    {
      title: '年级',
      dataIndex: 'year',
      key: 'year',
    },
    {
      title: '专业',
      dataIndex: 'major',
      key: 'major',
    },
    {
      title: '最近登录时间',
      dataIndex: 'lastLogin',
      key: 'lastLogin',
    },
  ];

  return (
    <div className="members-page">
      <div className="members-header">
        <Search
          placeholder="搜索成员"
          onSearch={handleSearch}
          style={{ width: 200 }}
        />
        <div>
          <Button type="primary" icon={<PlusOutlined />} style={{ marginRight: '8px',backgroundColor: '#6596fc'}}>
            添加成员
          </Button>
          <Button style={{ marginRight: '8px',backgroundColor: '#6596fc',color:'white'}}>导出成员</Button>
        </div>
      </div>
      <Table
        columns={columns}
        dataSource={members.filter((member) =>
          member.name.includes(searchText) || member.studentNumber.includes(searchText)
        )}
        rowKey="id"
        pagination={false}
        style={{ marginTop: '20px' }}
      />
      <div className="pagination-fixed">
        <span>第 1-13 条 共 13 条</span>
        <Pagination defaultCurrent={2} total={50} />
      </div>
    </div>
  );
};

export default MembersPage;
